import Taro, { Component } from '@tarojs/taro'
import { View, Text, Picker,Image } from '@tarojs/components'
import './pagetext.css'
import { AtAvatar, AtList, AtListItem, AtInput, AtForm, AtButton, AtGrid } from "taro-ui"
import timg from '../../../img/timg.jpg'
import keyboard from '../../../img/keyboard.jpg'


export default class Index extends Component {

  config = {
    navigationBarTitleText: '周星星'
  }
  constructor () { 
    super(...arguments); 
    this.state = {
      style:'display:none',
      icon:timg,
      soundbtn:'display:none',
      inputBox:'display:block',
    }
  }
  display(){
    this.setState({
      style:'display:block',
      icon:timg,
      soundbtn:'display:none',
      inputBox:'display:block',
    })
  } 

  closeBox(){
    this.setState({
      style:'display:none',
    })
  }
  soundClick(){
    if(this.state.icon==timg){
      this.setState({
        style:'display:none',
        icon:keyboard,
        soundbtn:'display:block',
        inputBox:'display:none',
      });
    }else{
      this.setState({
        style:'display:none',
        icon:timg,
        soundbtn:'display:none',
        inputBox:'display:block',
      });
    }
 
  }

  render () {
    return (
      <View className='index'>
      
        <AtListItem className='atlist' title='当前患者为付费随访' extraText='赠送免费追问包'  arrow='right'/>

        <View className='closebox' onClick={this.closeBox}>
        <Form className='from'>
        <AtAvatar className='img' image={app.imageUri+'img/touxiang.jpg'} />       
        <View className='textview'>
        <Text className='text'>医生，我眼睛看不见了。。。</Text>
        </View>
        <AtAvatar className='img-a' image={app.imageUri+'img/touxiang.jpg'} />       
        <View className='textview-a'>
        <Text className='text'>白内障摘除术后随访计划</Text>
        <Image className='img-b' src={app.getPath(app.imageUri+'img/picture.jpg')} />
        <View className='box'>
        <Text className='text-a'>我给你定制了一个随访计划，请遵照计划中提醒的内容来执行。</Text>
        </View>
        <AtListItem className='atlist-a' extraText='查看详情'  arrow='right'/>
        </View>
        </Form>  
        </View>
        
        <View className='bottom-box'>

        <View className='bottom'>
        <Image className='voice' src={this.state.icon} onClick={this.soundClick} />
        <AtInput className='input' style={this.state.inputBox}> </AtInput>
        <View className='sound' style={this.state.soundbtn}>
          <AtButton type='primary'>按住说话</AtButton>
         </View>       
        <Image className='plus' src={app.imageUri+'img/plus.jpg'} onClick={this.display} />
        </View>

        <View className='grid'>
     
        <AtGrid columnNum='4' style={this.state.style} data={
          [
            {
              image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
              value: '相册'
            },
            {
              image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
              value: '拍摄'
            },
            {
              image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
              value: '快捷回复'
            },
            {
              image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
              value: '患教'
            },
            {
              image: 'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png',
              value: '表单'
            },
            {
              image: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
              value: '随访计划'
            }
          ]
         } />
         </View>
         </View>
         
        
      </View>
    )
  }
}

